<template>
	<!-- 324157,bfcbd9 ,20a0ff-->

	<div class="sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
		 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
			<template v-for="item in items">
				<template v-if="item.subs">
					<el-submenu :index="item.index" :key="item.index + '-side'">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</template>
						<template v-for="subItem in item.subs">
							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
								<template slot="title">{{ subItem.title }}</template>
								<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{
                                    threeItem.title
                                }}</el-menu-item>
							</el-submenu>
							<el-menu-item v-else :index="'/'+subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index" :key="item.index">
						<i :class="item.icon"></i>
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import bus from '../common/bus';
	import axios from 'axios';
	import router from '../../router/index';
	export default {
		data() {
			return {
				collapse: false,
				items: []
			};
		},
		computed: {

			onRoutes() {

				var url = this.$route.path.replace('/', '');
				return url.substring(0, url.indexOf('/'));
			}
		},
		mounted() {

			var menus = [{
					icon: 'el-icon-s-home',
					index: 'dashboard',
					title: '系统首页'
				}
				
				// ,{
				// icon: 'el-icon-setting',
				// index: 'user',
				// title: '系统设置',
				// subs: [{
				// 		index: 'user',
				// 		title: '管理员'
				// 	},
				// 	{
				// 		index: 'menu',
				// 		title: '系统菜单'
				// 	},
				// 	{
				// 		index: 'role',
				// 		title: '管理员角色'
				// 	},
				// 	{
				// 		index: 'tenant',
				// 		title: '租户管理'
				// 	},
				// 	{
				// 		index: 'log',
				// 		title: '日志监控'
				// 	}
				// ]},
				
				];
			//var menus=[];
			var token = localStorage.getItem("token");

			// var data =  axios({
			// 	url: config.systemset + '/set/role/getmenubyroleid',
			// 	method: 'get'
			// }).then((res) => {
			// 	config.menuList = res.data;

			// 	return res;

			// });
			
            //根据权限生成动态菜单
		
			var firstMenus = config.menuList.filter(function(item) {
				return item.type == 1;
			});

			for (var i = 0; i < firstMenus.length; i++) {
				var menuItem = {
					icon: firstMenus[i].icon,
					index: 'menu' + String(i),
					title: firstMenus[i].displayName
				}
				var secondMenus = config.menuList.filter(function(item) {
					return (item.parentName == firstMenus[i].name&&item.type==2);
				});
	 
				var subs = [];
				for (var j = 0; j < secondMenus.length; j++) {
					subs.push({
						index: String(secondMenus[j].url).replace('/', ''),
						title: secondMenus[j].displayName
					})
				}
				 menuItem.subs = subs;
				 menus.push(menuItem);
			}
			var array = menus.concat(this.items);
 
			this.items = array;
		},
		created() {
			// console.log(constantRouterMap);
			// 通过 Event Bus 进行组件间通信，来折叠侧边栏
			// console.log(this.items);
			bus.$on('collapse', (msg) => {
				this.collapse = msg;
				bus.$emit('collapse-content', msg);
			});
		}
	};
</script>

<style scoped>
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 50px;
		bottom: 0;
		overflow-y: scroll;
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 200px;
	}

	.sidebar>ul {
		height: 100%;
	}
</style>
